<script setup lang='ts'>
// defineProps<{
//     color: string
//     size?: string
// }>()
// type props = {
//     color: string
//     size?: string
// }

// defineProps<props>()

// 设置默认值
const props = withDefaults(defineProps<{
    color: string
    size?: string
    btnType?: 'success' | 'danger' | 'warning'
    changeSize: (size1: string) => void
}>(), {
    btnType: 'success'
})
console.log(props.color);

const emit = defineEmits<{
    (e: 'changeColor', color: string): void
    (e: 'changeSize', size: string): void
}>()
const onBtnColor = () => {
    emit('changeColor', '好白啊')
}
</script>

<template>
    <div style="border: 10px solid red;width:200px;height:200px">
        <div>子组件:{{ color }}---{{ size }}---{{ btnType }}</div>
        <button @click="onBtnColor">改变颜色</button>
        <button @click="emit('changeSize', '挺大')">改变大小</button>
        <button @click="changeSize('aaaaa')">改变大小-b</button>
    </div>
</template>

<style scoped></style>